<template>
  <div class="page-container">
		<!-- 面包屑部分 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>营销中心</el-breadcrumb-item>
			<el-breadcrumb-item>拼团</el-breadcrumb-item>
			<el-breadcrumb-item>拼团开团管理</el-breadcrumb-item>
		</el-breadcrumb>
		</div>

		<!--工具栏-->
		<div class="toolbar">
			<el-form :inline="true" :model="filters" :size="size">
				<el-row class="search-input">
					<el-form-item prop="id" label="拼团单号：">
						<el-input clearable v-model="filters.id" placeholder="拼团单号" maxlength="80"></el-input>
					</el-form-item>
					<el-form-item prop="thirdUserId" label="开团用户ID：">
						<el-input clearable v-model="filters.thirdUserId" placeholder="开团用户ID"></el-input>
					</el-form-item>
					<el-form-item prop="promName" label="拼团活动名称：">
						<el-input clearable v-model="filters.promName" placeholder="拼团活动名称" maxlength="80"></el-input>
					</el-form-item>
          <el-form-item prop="status" label="拼团状态：">
            <el-select v-model="filters.status" placeholder="全部" clearable>
              <el-option
                v-for="item in instStatus"
                :key="item.type"
                :label="item.name"
                :value="item.type"
              ></el-option>
            </el-select>
          </el-form-item>
					<div class="times">
					<el-form-item prop="startLaunchTime" label="开团时间：">
						<el-date-picker
							v-model="filters.startLaunchTime"
							type="datetime"
							value-format="yyyy-MM-dd HH:mm:ss"
							format="yyyy-MM-dd HH:mm:ss"
              @change="changeStartDate"
              :picker-options="startDateDisabled"
							placeholder="开始时间" class="input_postion">
						</el-date-picker>
					</el-form-item>
					<span class="times-to">-</span>
					<el-form-item prop="endLaunchTime">
						<el-date-picker
							v-model="filters.endLaunchTime"
							type="datetime"
							value-format="yyyy-MM-dd HH:mm:ss"
							format="yyyy-MM-dd HH:mm:ss"
              @change="changeEndDate"
              :picker-options="endDateDisabled"
							placeholder="结束时间" class="input_postion">
						</el-date-picker>
					</el-form-item>
					</div>
				</el-row>

				<!-- 查询 重置按钮 -->
				<el-row class="search-button-noborder">
					<el-form-item>
						<kt-button  :label="$t('action.reset')"  @click="reset" class="resetButton" icon="el-icon-refresh"/>
					</el-form-item>
					<el-form-item>
						<kt-button icon="el-icon-search" label="搜索"  class="searchButton" @click="findPage(filters)"/>
					</el-form-item>
					
				</el-row>
			</el-form>
		</div>

		<!--表格内容栏-->
		<CyTable :height="350"
			:data="pageResult"
			:columns="filterColumns"
			:showSelection="false"
			:showEditOperation="false"
			:showBatchDelete="false"
			:showDeleteOperation="false"
			:showDetailOperation=true
			@findPage="findPage"
			@handleDetail="handleDetail"
			ref="CyTable"
			>
		</CyTable>


		<!--详情页面-->
		<el-dialog :title="operation?'开团管理详情':'开团管理详情'"  :visible.sync="dialogVisible" :close-on-click-modal="false" @closed="handleClose"  >
			<el-form :model="dataForm" label-width="130px" :rules="dataFormRules" ref="dataForm" :size="size"
				label-position="right" inline>
				<el-form-item label="ID" prop="id" v-if="false">
					<el-input clearable v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="拼团单号：" prop="marketnumber" >{{dataForm.id}}</el-form-item>
				<el-form-item label="拼团活动名称：" prop="marketname">{{dataForm.promName}}</el-form-item>
				<el-form-item label="拼团人数：" prop="count">{{dataForm.groupMembers}}</el-form-item>
				<el-form-item label="成团状态：" prop="status">{{dataForm.statusName}}</el-form-item>
				<el-form-item label="开团时间：" prop="starttime" class="mb30">{{dataForm.launchTime}}</el-form-item>

				<el-divider ><span style="font-size:16px;font-weight:500">参团人信息</span></el-divider>
				<template>
					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" >
						<el-table-column prop="id" label="订单编号" width="200"></el-table-column>
						<el-table-column prop="customerId" label="参团用户ID" width="200"></el-table-column>
						<el-table-column prop="receiveMember" label="收货人" width="120"></el-table-column>
						<el-table-column prop="cellPhone" label="联系电话" width="200"></el-table-column>
						<el-table-column prop="paymentType" label="支付方式" width="120"></el-table-column>
						<el-table-column prop="receiveAddress" label="收货地址" width="300"></el-table-column>
						<el-table-column prop="joinTime" label="参团时间" width="200"></el-table-column>
						<el-table-column prop="statusName" label="状态" width="120"></el-table-column>
					</el-table>
				</template>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align:center">
				<el-button :size="size" @click.native="dialogVisible = false" type="primary" class="cancelButton">{{$t('action.cancel')}}</el-button>
			</div>
		</el-dialog>

  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import CyTable from "@/views/Core/CyTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import XLSX from 'xlsx'
import axios from 'axios'
export default {
	components:{
		PopupTreeInput,
		CyTable,
		KtButton,
		TableColumnFilterDialog
	},
	data() {
		return {
		  //2：组团中 3： 已成团 4：组团失败
      instStatus:[{type:2,name:"组团中"},{type:3,name:"组团成功"},{type:4,name:"组团失败"},],
			size: 'small',
			filters: {
        status:null,
			  start:1,
        limit:10,
				proName: null,
        id:null,
        catptainId:null,
        thirdUserId:null,
        startLaunchTime:null,
		endLaunchTime:null,
			},
			value:0,
			columns: [],
			filterColumns: [],
			pageRequest: {pageNum: 1, pageSize: 10},
			pageResult: {},
			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			dataFormRules: {},
			dataForm: {},
			deptData: [],
			deptTreeProps: {
				label: 'name',
				children: 'children'
			},
			roles: [],
			tableData: [],
      startDateDisabled: {},//开始时间限制
      endDateDisabled: {},//结束时间限制
	  loading:false,
	  grouponCode:this.$route.query.grouponCode,
		}
	},
	methods: {
    changeStartDate: function() {
      var this_ = this;
      this_.endDateDisabled = {
        disabledDate: time => {
          if (this_.filters.startTime) {
            return time.getTime() <= new Date(this_.filters.startTime).getTime();
          }
        }
      };
    },
    changeEndDate: function() {
      var this_ = this;
      this_.startDateDisabled = {
        disabledDate: time => {
          if (this_.filters.endTime) {
            return time.getTime() >= new Date(this_.filters.endTime).getTime();
          }
        }
      };
    },
	   // 获取分页数据
		findPage: function (data) {
			this.filters.url = "jic-market/PatchGrouponInst/query";
			if(this.grouponCode){
				this.filters.grouponCode = this.grouponCode;
			}
			this.$refs.CyTable.findPage(this.filters);
	  },

    //弹窗关闭方法
		handleClose (){
			 this.$refs.dataForm.resetFields()
		},
		submitForm (){
			this.$message({message:'操作成功',type:'success'})
			this.dialogVisible=false
		},

      //列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: "warning",
            closeOnClickModal: false,
          }).then(() => {
			let filename="库存盘点"
			this.$refs.CyTable.exportData(this.filters,this.filterColumns,filename)
          }).catch(() => {

          });
		},
		// 详情按钮
		handleDetail: function (obj) {
		  let id =obj.row.id;
      this.$router.push("/GrouponStartMgmDetail?id=" + `${id}`);
		  // let that = this;
			// this.dialogVisible=true;
      //
      // this.tableData=[];
      // this.dataForm={};
      //
			// var param = {};
      // param.url = "jic-market/PatchGrouponInst/detail";
      // param.id = obj.row.id;
      // this.utils.request.httpUtils(param, function (res) {
      //
      //
      //   that.tableData = res.data.detailResponseList;
      //   that.dataForm = res.data;
      //
      // });
    },

		reset:function(){
			//需要校验的keys
			let keys = ["id","thirdUserId","promName","startLaunchTime","endLaunchTime"]
			//调用校验
			let  boo = this.seachTableUtils.checkFromIsNull(this.filters,keys)
			if(!boo){
				return;
			}
			
		   this.filters={};
		   this.findPage()
		},

		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      	},
		// 处理表格列过滤显示
      	initColumns: function () {
			this.columns = [
				//{prop:"id", label:"ID", minWidth:50},
				{prop:"grouponCode", label:"拼团活动ID", minWidth:120},
				{prop:"grouponInstCode", label:"拼团单号", minWidth:120},
				{prop:"statusName", label:"成团状态", minWidth:120},
				{prop:"promName", label:"拼团活动名称", minWidth:120},
				// {prop:"channelCode", label:"渠道", minWidth:120},
				{prop:"thirdUserId", label:"开团用户ID", minWidth:120},
				{prop:"launchTime", label:"开团时间", minWidth:120}

			]
			this.filterColumns = JSON.parse(JSON.stringify(this.columns));
      	},


	},
	mounted() {
		this.initColumns()
	}


}


</script>

<style scoped lang='scss'>

</style>
